<template>
	<view class="page_root" @click="click_root">
		<view class="content">
			<view class="top">
				<HomePageTopComponent />
			</view>
			<view class="center">
				<view class="center-top">
					<view class="left">
						<text>工具列表</text>
					</view>
					<view class="right">
						<!-- <text>工具列表：</text> -->
						<view class="list_type" :class="rowAnimate[0]">
							<u-icon @click="openTools"   name="arrow-down" color="#007aff"/>
						</view>
					</view>
				</view>
				<view class="center-bottom" :class="centerBottomAnimate[0]">
					<ToolItemComponent v-for="(item,index) in tool_list" :tool_item="item" :key="index" />
					<view class="new_page_tools">
						<u-button  class="btn" type="primary" text="筛选" />
						<u-button  class="btn" type="primary" text="搜索" />
					</view>
				</view>
			</view>
			<view class="post-list" :class="poslListAnimate[0]">
				<PostList :posts="[post]" />
			</view>
		</view>
		<NavBarComponet/>
	</view>
</template>

<script>
	import post from "@/static/a_post/info.js";
	import mixAnimate from "@/mixins/play_animate.js"
	import {mapState} from "vuex"
	export default {
		data() {
			return {
				rowAnimateCount:0,
				toolsAnimateCount:0,
				post
			}
		},
		methods: {
			click_root() {
				this.$bus.$emit("rootCliked")
			},
			openTools() {
				this.rowAnimateCount+=1;
				
			}
		},
		onShow() {
			
		},
		computed:{
			...mapState(['tool_list']),
			rowAnimate(){
				console.log(this.rowAnimateCount);
				return this.playAnimateMixed(['row-stander','open-row','close-row'],this.rowAnimateCount);
			},
			centerBottomAnimate(){
				console.log(this.rowAnimateCount);
				return this.playAnimateMixed(['list_type','open-tools','close-tools'],this.rowAnimateCount)
			},
			poslListAnimate(){
				return this.playAnimateMixed(['post-list','slide-down-post-list','slide-up-post-list'],this.rowAnimateCount)
			}
		},
		mixins:[mixAnimate]
	}
</script>

<style scoped lang="scss">
	@import 'classes.scss';
	svg {
		width: 22px;
		height: 22px;
		display: block;
		font-size: 22px;

	}

	.text-area {
		height: 200vh;
		width: 100%;
	}

	.center {
		// height: 300rpx;
		// width: 100vw;
		padding: 0 10rpx;

		.center-top {
			width: 100%;
			margin: 20rpx 0 10rpx 0;
			height: 55rpx;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: $font-color;
			font-size: 12px;
			box-sizing: border-box;
			border-radius: 5rpx;
			box-shadow: $g-shadow;


			.right {
				display: flex;
				align-items: center;
				color: $font-color;

				.list_type {
					z-index: 2;
					width: 35rpx;
					height: 35rpx;
					border-radius: 50%;
					padding: 3rpx;
					display: flex;
					align-items: center;
					overflow: hidden;
					margin-left: 10rpx;
					justify-content: space-evenly;
					border: solid 1rpx #007aff;
				}
			}

			.left {
				display: flex;
			}
		}

		.center-bottom {
			// overflow-x: hidden;
			height: auto;
			transform: translateX(-200%);
			position: relative;
			float: left;
			width: 100%;
			margin: 5rpx 0;
			z-index: 3;
			box-sizing: border-box !important;
			padding: 10rpx 15rpx;
			box-shadow: $g-shadow;
			

			.new_page_tools {
				width: 100%;
				height: 50rpx;
				border: dashed 2rpx #007aff;
				display: flex;
				// overflow: hidden;
				white-space: nowrap;
				justify-content: space-between;
				
				/deep/ .u-button{
					height: 100%;
				}

				.btn {
					width: 49%;
					margin: 0;
					text-align: center;
					// line-height: 20rpx;
				}
			}
		}

	}

	.post-list {
		box-sizing: border-box;
		padding: 0 10rpx;
		width: 100%;
		// top: 0;
		// float: top;
		// float: top;
		// float: top;
		position: absolute;
		
		// position: relative;
		

	}
</style>